<template>
	<view class='box'>

		<myProgress :textList1="textList" :littleList1="littleList"></myProgress>

		<view class="boxCont">
			<view class="mark">{{getType(detail.type)}}</view>
			<view class="head">
				<view class="title">订单号: {{detail.orderNum}}</view>
			</view>
			<view class="line"></view>
			<view class="cont">
				<view class="left">退款金额</view>
				<view class="right"> <text class="price">￥{{detail.refundAmount}}</text> </view>
			</view>
			<view class="cont">
				<view class="left">退款原因</view>
				<view class="right textOver">{{detail.redundReason}}</view>
			</view>
			<view class="cont">
				<view class="left ">详细描述</view>
				<view class="right textOver">{{detail.content}}</view>
			</view>
			<view class="cont">
				<view class="left ">售后类型</view>
				<view class="right textOver">{{detail.refundType==1?"仅退款":"退货退款"}}</view>
			</view>
			<view class="cont" style="height: 100rpx;" v-if="detail.img">
				<view class="left">图像凭证</view>
				<view class="right">
					<image :src="imgapi + detail.img" mode="aspectFill" @click="imgClick(imgapi + detail.img)"></image>
				</view>
			</view>
		</view>

		<view class="boxCont" v-if="detail.refundType==2&&detail.status==1">
			<view class="cont">
				<view class="left ">快递单号</view>
				<view class="right textOver">
					<uni-easyinput errorMessage :inputBorder="false" v-model="params.courierNum" focus
						placeholder="请填写快递单号" maxlength="20"></uni-easyinput>
				</view>
			</view>
		</view>
		<view v-if="params.courierNum" style="display: flex;">
			<view style="margin-left: auto;"><text style="color: #c3c3c3;font-size: 30rpx;">如填错单号可修改</text></view>
		</view>

		<view class="bottomBtn">
			<button size="mini" class="btn change" plain @click="changeApply"
				v-if="detail.refundType==2&&detail.status==1">提交快递单号</button>
		</view>
		</uni-popup>
	</view>
</template>

<script>
	import myProgress from "../common/myProgress.vue"
	export default {
		components: {
			myProgress
		},
		data() {
			return {
				scrollTop: 0,
				time: '233',

				/* 
				 展示所有
				 status:  0:已经处理过的    1:现在的    -1:未来的
				 time:  倒计时
				 desc: 描述文本
				 */
				textList: [{
						title: "提交申请",
						status: 0,
					},
					{
						title: "商家处理",
						status: 1,
						time: "",
						desc: [
							'商家同意后，如果是退货，请按照给出的退货地址退货，并请记录退货运单号',
							'如商家拒绝，您可以修改申请后再次发起，商家会重新处理',
						]
					},
					{
						title: "寄回商品",
						status: -1,
					},
					{
						title: "退款成功",
						status: -1,
					}
				],
				// 展示一定
				littleList: [],
				detail: {},
				imgapi: '',
				params: {
					courierNum: '',
					orderNum: '',
				},
			}
		},
		onLoad(e) {
			this.imgapi = this.$reqConfig.URLIMAGE

			this.getDetail(e.orderNum)
			this.params.orderNum = e.orderNum

		},

		methods: {
			showTit(tit, icon = "none") {
				uni.showToast({
					title: tit,
					icon: icon
				})
			},
			// 修改申请
			changeApply() {
				if (!this.params.courierNum) {

					this.showTit("请填写快递单号")
					return
				}
				uni.showLoading({
					title: "加载中",
					icon: "none"
				})

				this.$axios({
					url: `user/afterSale/writeCourier`,
					method: "post",
					data: this.params,
				}).then((res) => {
					uni.showLoading()
					this.showTit("提交成功", "success")
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 500)
				}).catch(err => {
					uni.showLoading()
				})
			},

			imgClick(url) {
				var imgArr = [];
				imgArr.push(url);
				//预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				});
			},

			getType(type) {
				switch (type) {
					case 1:
						return '普通'
					case 2:
						return '团购'
					case 3:
						return '平台'
				}
			},

			getDetail(orderNum) {
				uni.showLoading({
					title: "加载中"
				})
				this.$axios({
					url: `user/afterSale/detail`,
					method: "post",
					data: {
						orderNum
					}
				}).then((res) => {
					this.detail = res.result
					/*
					0：商家审核中
					1：待寄回
					2：已退款
					-1：已拒绝
					 */
					let status = this.detail.status
					switch (status) {
						case 0:
							break
						case 1:
							this.textList[1].status = 0
							this.textList[2].status = 1
							break
						case 2:
							this.textList[1].status = 0
							this.textList[2].status = 0
							this.textList[3].status = 1
							break
						case -1:
							this.textList[1].status = 0
							this.textList[2] = {
								title: "商家拒绝退款",
								status: 1
							}
							this.textList.length = 3
							break
					}
					this.params.courierNum = res.result.courierNumber
					this.setList()
				})
			},

			// 设置部分展示
			setList() {
				/* 
				0：商家审核中
				1：待寄回
				2：已退款
				-1：已拒绝
				 */

				let index = this.textList.findIndex(val => val.status == 1)
				if (index == this.textList.length - 1) {
					// 最后一位
					this.littleList = []
					this.littleList[0] = this.textList[index - 1]
					this.littleList[1] = this.textList[index]
				} else {
					// 中间位
					this.littleList = []
					this.littleList[0] = this.textList[index - 1]
					this.littleList[1] = this.textList[index]
					this.littleList[2] = this.textList[index + 1]
				}

				uni.hideLoading()
			},
			// 处理事件戳
			dealTime(time) {
				//获取当前时间
				let now = new Date().getTime()

				//设置截止时间
				var end = new Date(time).getTime()
				//获取截止时间和当前时间的时间差
				var leftTime = end - now;
				//定义变量 d,h,m,s分别保存天数，小时，分钟，秒
				var d, h, m, s;
				//判断剩余天数，时，分，秒
				if (leftTime >= 0) {
					d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
					h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
					m = Math.floor(leftTime / 1000 / 60 % 60);
					s = Math.floor(leftTime / 1000 % 60);
				}

				return `${d}天${h}时${m}分${s}秒`
			},
			all() {
				this.$refs.popup.open("bottom")
			},
			// 弹窗改变
			popChange(e) {
				console.log(e);
			},
			//关闭弹窗
			closePop(e) {
				this.$refs.popup.close("bottom")
			}
		},
	}
</script>

<style lang='scss' scoped>
	.box {
		padding: 20rpx;
	}

	.boxCont {
		position: relative;
		overflow: hidden;

		.line {
			margin: 20rpx 0;
		}

		.mark {
			background: red;
			color: white;
			width: 120rpx;
			height: 35rpx;
			font-size: 26rpx;
			display: flex;
			align-items: flex-end;
			justify-content: center;
			line-height: 35rpx;
			text-align: center;
			position: absolute;
			top: 10rpx;
			right: -30rpx;
			transform: rotate(45deg);
		}

		.cont {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 55rpx;

			.right {
				width: 70%;
				text-align: right;

				image {
					width: 70rpx;
					height: 70rpx;
					border: 2rpx solid #eee;
				}

				.price {
					color: #e86220;
				}

				/deep/.uni-easyinput__content-input {
					text-align: right;
				}
			}
		}
	}

	.bottomBtn {
		background-color: #fff;
		padding: 10rpx 20rpx;
		text-align: right;
		width: 95%;

		.btn {
			border-radius: 100rpx;
			border-color: #d4d4d4;
		}

		.change {
			margin-left: 10rpx;
			color: #e68b55;
			border-color: #e68b55;
		}
	}

	.boxCont {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;

		.titOne {
			font-size: 28rpx;

			&::before {
				content: "";
				display: inline-block;
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				/* background-color: red; */
				border: 3rpx solid #e86220;
				margin-right: 15rpx;
			}
		}

		.nullBlock {
			min-height: 52rpx;
			border-left: 4rpx solid #e86220;
			margin-left: 7rpx;
			margin-bottom: -19rpx;
			display: inline-block;
			font-size: 25rpx;
			padding-left: 20rpx;
			padding-bottom: 20rpx;
			color: #a1a1a1;

			.info {
				margin: 12rpx 0;
			}
		}

		.nullColor {
			border-left-color: #cbcbcb;
		}

		.nowTit {
			margin: 10rpx 0;

			.tit {
				font-size: 30rpx;
				font-weight: bold;
				color: #e86220;
			}

			.time {
				font-size: 25rpx;
				margin-left: 10rpx;
			}

			&::before {
				content: "";
				display: inline-block;
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background-color: #e86220;
				border: 3rpx solid #e86220;
				margin-right: 15rpx;
			}
		}

		.afterTit {
			margin-top: 10rpx;
			font-size: 28rpx;
			color: #a1a1a1;


			&::before {
				content: "";
				display: inline-block;
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background-color: #cbcbcb;
				border: 3rpx solid #cbcbcb;
				margin-right: 15rpx;

			}

			.right {
				float: right;
				color: #333;

				.icon-xiangyou1 {
					color: #bcbcbc;
				}
			}
		}
	}

	.popupContent {
		padding: 20rpx;
		min-height: 50vh;
		max-height: 80vh;
		box-sizing: border-box;

		.top {
			margin: 20rpx 0;
			text-align: center;


			.icon-guanbi {
				float: right;
				font-size: 25rpx;
				font-weight: bold;

				.btn {}
			}
		}

		.bottomBtn {
			background-color: #fff;
			padding: 10rpx 20rpx;
			width: 95%;

			.btn {
				border-radius: 100rpx;
				color: #fff;
				background: linear-gradient(to right, #fd8c02, #ff5402);
			}
		}
	}

	/deep/.vue-ref {
		border-radius: 30rpx 30rpx 0 0;
	}

	/deep/.uni-popup__wrapper {
		border-radius: 30rpx 30rpx 0 0;
	}
</style>
